<template>
  <div class="home">
    <div class="panel">
      <div class="common-titles">
        <div class="line"></div>
        <div class="txt">商城统计</div>
        <span class="demonstration" style="margin-left: 30px;margin-right: 10px;">时间范围</span>
        <el-date-picker
          v-model="timestr"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          @change="times()"
          value-format="yyyy-MM-dd"
          style="height: 35px;"
        ></el-date-picker>
      </div>
      <div class="content">
        <el-row class="total-wrapper">
          <el-col class="item">
            <div class="inner bg-1">
              <div class="info">
                <div class="tit">用户数（人）</div>
                <div class="num">{{shop.total_user}}</div>
              </div>
              <i class="iconfont hg-icon-yonghu1"></i>
            </div>
          </el-col>
          <el-col class="item" style="margin-left: 20px;">
            <div class="inner bg-2">
              <div class="info">
                <div class="tit">代理商（个）</div>
                <div class="num">{{shop.total_agent}}</div>
              </div>
              <i class="iconfont hg-icon-mendian"></i>
            </div>
          </el-col>
          <el-col class="item" style="margin-left: 20px;">
            <div class="inner bg-3">
              <div class="info">
                <div class="tit">完成订单数（单）</div>
                <div class="num">{{shop.total_order}}</div>
              </div>
              <i class="iconfont hg-icon-dingdan"></i>
            </div>
          </el-col>
          <el-col class="item" style="margin-left: 20px;">
            <div class="inner bg-4">
              <div class="info">
                <div class="tit">销售额（元）</div>
                <div class="num">{{shop.total_fee}}</div>
              </div>
              <i class="iconfont hg-icon-jine"></i>
            </div>
          </el-col>
          <el-col class="item" style="margin-left: 20px;">
            <div class="inner bg-5">
              <div class="info">
                <div class="tit">盈利（元）</div>
                <div class="num">{{shop.totle_profit}}</div>
              </div>
              <i class="iconfont hg-icon-jine"></i>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>

    <div class="panel">
      <div class="common-title">
        <div class="line"></div>
        <div class="txt">
          <span>订单统计</span>
          <router-link :to="{name:'orderIndex'}">
            <span class="more">
              更多订单
              <i class="el-icon-arrow-right"></i>
            </span>
          </router-link>
        </div>
      </div>
      <div class="content">
        <el-row :gutter="20" class="total-order">
          <el-col :xs="24" :sm="12" :md="6" class="item">
            <router-link :to="{name:'orderIndex'}">
              <div class="inner">
                <img :src="icon_all" class="icon" />
                <div class="info">
                  <div class="tit">全部</div>
                  <div class="num u-color-info">{{order.total_all}}</div>
                </div>
              </div>
            </router-link>
          </el-col>
          <el-col :xs="24" :sm="12" :md="6" class="item">
            <router-link :to="{name:'orderIndex',query:{status:1}}">
              <div class="inner">
                <img :src="icon_pay" class="icon" />
                <div class="info">
                  <div class="tit">待付款</div>
                  <div class="num u-color-success">{{order.total_pay}}</div>
                </div>
              </div>
            </router-link>
          </el-col>
          <el-col :xs="24" :sm="12" :md="6" class="item">
            <router-link :to="{name:'orderIndex',query:{status:3}}">
              <div class="inner">
                <img :src="icon_delivery" class="icon" />
                <div class="info">
                  <div class="tit">已发货</div>
                  <div class="num u-color-warning">{{order.total_delivery}}</div>
                </div>
              </div>
            </router-link>
          </el-col>
          <el-col :xs="24" :sm="12" :md="6" class="item">
            <router-link :to="{name:'orderOut'}">
              <div class="inner">
                <img :src="icon_refund" class="icon" />
                <div class="info">
                  <div class="tit">退款/售后</div>
                  <div class="num u-color-danger">{{order.total_refund}}</div>
                </div>
              </div>
            </router-link>
          </el-col>
        </el-row>
      </div>
    </div>
    <div class="panel">
      <div class="common-titles">
        <div class="line"></div>
        <span>交易数据趋势</span>
        <span class="demonstration" style="margin-right: 10px;margin-left: 30px;">时间范围</span>
        <el-date-picker
          v-model="ordertimestr"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          @change="order_times()"
          value-format="yyyy-MM-dd"
          style="height: 35px;"
        ></el-date-picker>
      </div>
      <div class="content">
        <div id="tradeOrder" class="u-mt-30"></div>
      </div>
    </div>
  </div>
</template>

<script>
import icon_all from "@/assets/imgs/order-stat/icon-all.png";
import icon_pay from "@/assets/imgs/order-stat/icon-pay.png";
import icon_delivery from "@/assets/imgs/order-stat/icon-delivery.png";
import icon_refund from "@/assets/imgs/order-stat/icon-refund.png";
import G2 from "@antv/g2";

export default {
  data() {
    return {
      icon_all: icon_all,
      icon_pay: icon_pay,
      icon_delivery: icon_delivery,
      icon_refund: icon_refund,
      shop: {},
      order: {},
      weapp: {},
      tradeOrder: null,
      timestr: "",
      usertimestr: "",
      ordertimestr: "",
    };
  },
  methods: {
    times() {
      this.getInitData();
    },
    //小程序实时统计
    xcx_times() {
      this.getWeappRealtime();
    },
    order_times() {
      this.getInitData_order();
    },
    initChartTrade() {
      this.tradeOrder = new G2.Chart({
        container: "tradeOrder",
        forceFit: true,
        height: 300,
        padding: "auto",
      });
      this.tradeOrder.source([], {
        order_total: {
          min: 0,
          type: "linear",
          tickCount: 5,
          nice: true,
          alias: "销售额",
        },
      });
      this.tradeOrder.line().position("create_date*order_total");
      this.tradeOrder.render();
    },
    // 商场统计
    getInitData() {
      return new Promise((resolve, reject) => {
        this.$api.dashboard
          .statistics({
            order_time: this.ordertimestr,
            shop_time: this.timestr,
          })
          .then((res) => {
            if (res.code == 1) {
              this.shop = res.data.shop;
              this.order = res.data.order;
              this.tradeOrder.changeData(res.data.trade_order);
            }
            resolve();
          })
          .catch((e) => {
            reject(e);
          });
      });
    },
    // 订单统计
    getInitData_order() {
      return new Promise((resolve, reject) => {
        this.$api.dashboard
          .statistics({
            order_time: this.ordertimestr,
            shop_time: this.timestr,
          })
          .then((res) => {
            if (res.code == 1) {
              this.shop = res.data.shop;
              this.order = res.data.order;
              this.tradeOrder.changeData(res.data.trade_order);
            }
            resolve();
          })
          .catch((e) => {
            reject(e);
          });
      });
    },
    getWeappRealtime() {
      this.$api.analysis
        .userRealtime({
          start_time: this.usertimestr[0],
          end_time: this.usertimestr[1],
        })
        .then((res) => {
          if (res.code == 1) {
            this.weapp = res.data;
          }
        });
    },
    formatRatio(value) {
      return (value * 100).toFixed(2) + "%";
    },
    // 获取当天
    getDayTime() {
      var now = new Date();
      var year = now.getFullYear(); //得到年份
      var month = now.getMonth(); //得到月份
      var date = now.getDate(); //得到日期
      month = month + 1;
      month = month.toString().padStart(2, "0");
      date = date.toString().padStart(2, "0");
      var defaultDate = `${year}-${month}-${date}`;
      this.usertimestr = [defaultDate, defaultDate];
    },
    // 获取最近7天
    getWeekTime() {
      const end = new Date();
      const start = new Date();
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
      this.ordertimestr = [start, end];
    },
    // 获取当月
    getMothTime() {
      let date = new Date();
      let month = (date.getMonth() + 1).toString().padStart(2, "0");
      let year = date.getFullYear();
      let startTime = year + "-" + month + "-01";
      let day = new Date(year, month, 0);
      let endTime = year + "-" + month + "-" + day.getDate();
      this.timestr = [startTime, endTime];
    },
  },
  created() {
    this.getDayTime();
    this.getWeekTime();
    this.getMothTime();
  },
  mounted() {
    this.initChartTrade();
    this.getInitData().then(() => {
      // this.getWeappRealtime();
    });
  },
};
</script>

<style lang="scss" scoped>
.line {
  width: 1px;
}
.home {
  .common-t {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .common-titles {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    .line {
      width: 1px;
      margin-right: 8px;
      height: 16px;
      border-left: 3px solid #3788ee;
    }
    .block {
      height: 30px;
    }
  }

  padding: 20px;

  .panel {
    background: #ffffff;
    padding: 20px;
    margin-bottom: 20px;

    .content {
      margin-top: 10px;

      .total-wrapper {
        display: flex;
        .item {
          margin-top: 20px;
          .inner {
            display: flex;
            justify-content: space-between;
            align-items: center;
            background: #ffffff;
            padding: 30px 20px;
            color: #ffffff;

            &.bg-1 {
              background: linear-gradient(-125deg, #57bdbf, #2f9de2);
            }

            &.bg-2 {
              background: linear-gradient(-125deg, #ff7d7d, #fb2c95);
            }

            &.bg-3 {
              background: linear-gradient(-113deg, #c543d8, #925cc3);
            }

            &.bg-4 {
              background: linear-gradient(-141deg, #ecca1b, #f39526);
            }
            &.bg-5 {
              background: linear-gradient(-141deg, #04ec1f, #058d0e);
            }

            .info {
              .tit {
                font-size: 16px;
              }

              .num {
                font-size: 36px;
                margin-top: 20px;
              }
            }

            .iconfont {
              font-size: 64px;
            }
          }
        }
      }

      .total-order {
        padding-bottom: 10px;

        .item {
          margin-top: 20px;

          .inner {
            display: flex;
            justify-content: center;
            align-items: center;

            .icon {
              width: 64px;
            }

            .info {
              min-width: 70px;
              margin-left: 20px;

              .tit {
                font-size: 16px;
              }

              .num {
                margin-top: 5px;
                font-size: 24px;
                font-weight: bold;
              }
            }
          }
        }
      }

      .total-weapp {
        .item {
          margin-top: 20px;

          .inner {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;

            .tit {
              font-size: 16px;
            }

            .num {
              margin-top: 10px;
              font-size: 30px;
              font-weight: bold;
            }

            .sub {
              margin-top: 10px;
              color: #666666;
            }
          }
        }
      }
    }
  }
}
</style>
